<template>
    <el-dialog v-model="visible" :destroy-on-close="true" :width="800" top="5" :title="`${dialogData.title}参数`">
        <el-form ref="ruleFormRef" :rules="rules" :disabled="dialogData.isView" :model="dialogData.rowData"
            label-width="100px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="请假类型" prop="leaveType" clearable>
                        <el-select v-model="dialogData.rowData!.leaveType" class="m-2" placeholder="请选择请假类型">
                            <el-option v-for="item in leaveType" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="请假周期" prop="startTime" clearable>
                        <el-col :span="8">
                            <el-date-picker v-model="dialogData.rowData!.startTime" type="datetime"
                             format="YYYY-MM-DD HH:mm:ss" @change="onStartChange" placeholder="请选择开始时间" />
                        </el-col>
                        <el-col :span="2" style="text-align:center;">
                            <span class="text-gray-500">-</span>
                        </el-col>
                        <el-col :span="8">
                            <el-date-picker v-model="dialogData.rowData!.endTime" type="datetime"
                                format="YYYY-MM-DD HH:mm:ss" @change="onEndChange" placeholder="请选择结束时间" />
                        </el-col>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="请假周期" prop="leaveDay">
                        <el-input v-model="dialogData.rowData!.leaveDay" readonly></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="原因" prop="reason" clearable>
                        <el-input type="textarea" :rows="2" v-model="dialogData.rowData!.reason" placeholder="请输入请假事由">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" v-show="!dialogData.isView" @click="handleSubmit(false)">保存</el-button>
            <el-button type="primary" v-show="!dialogData.isView" @click="handleSubmit(true)">保存并提交</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts" name="UserDialog">
import { ref, reactive } from 'vue';
import { ElMessage, FormInstance, FormRules, ElMessageBox } from 'element-plus';
import { leaveType, leaveStatus } from "/@/utils/serviceDict";
import rulesObj from './rules';
import moment from 'moment'
import { fetchApprover } from "/@/api";
//验证规则
const rules = reactive<FormRules>(rulesObj);

//定义弹框props参数
interface DialogProps {
    title: string;
    isView: boolean;
    rowData?: any;
    apiUrl?: (params: any) => Promise<any>;
    getTableList?: () => Promise<any>;
}

// drawer框状态
const visible = ref(false);
const dialogData = ref<DialogProps>({
    isView: false,
    title: '',
});

const approverList = ref([])

// 接收父组件传过来的参数
const acceptParams = (params: DialogProps): void => {
    dialogData.value = params;
    visible.value = true;
};

//时间选择
const onStartChange = (value: any) => {
    const endTime = dialogData.value.rowData.endTime
    if (endTime) {
        const leaveDay = moment(endTime - value).format('D')
        dialogData.value.rowData.leaveDay = leaveDay
    }
}

const onEndChange = (value: any) => {
    const startTime = dialogData.value.rowData.startTime
    if (startTime) {
        const leaveDay = moment(value - startTime).format('D')
        dialogData.value.rowData.leaveDay = leaveDay
    }
}

//获取审批人
const fetchApproverList = (leaveDay: any) => {
    fetchApprover({ type: 'LeaveProcess', leaveDay }).then(res => {
        approverList.value = res.data
    })
}

const ruleFormRef = ref<FormInstance>();
// 提交数据（新增/编辑）
const handleSubmit = (isSubmit:Boolean) => {
    ruleFormRef.value!.validate((valid) => {
        if (!valid) return;
        if (!dialogData.value.apiUrl) return;
        ElMessageBox.confirm(`确定${dialogData.value.title}吗?`, '提示', { type: 'warning' }).then(async () => {
            const res = await dialogData.value.apiUrl({...dialogData.value.rowData, isSubmit});
            if (res) {
                ElMessage.success({ message: `${dialogData.value.title}用户成功！` });
                dialogData.value.getTableList && dialogData.value.getTableList();
                visible.value = false;
            }
        });
    });
};

defineExpose({
    acceptParams,
});
</script>
